<template>
  <el-pagination
    v-model:currentPage="page.page"
    :page-sizes="[5, 15, 25, 50, 100]"
    :page-size="page.page_size"
    background
    layout="total, prev, pager, next, sizes"
    :total="page.total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  >
  </el-pagination>
</template>
<script lang="ts" setup>
import { store } from '@/store'
import { ref, reactive, computed } from 'vue'
import bus from '@/utils/bus'
const emit = defineEmits(['submit'])
// 总数量
const pageTotal = computed(() => {
  return store.getters['pageTotal']
})
const page = reactive({
  page: 1,
  page_size: 15,
  total: 0
})

const handleSizeChange = (val: number) => {
  page.page_size = val
  emit('submit', page)
  console.log(`${val} 每页显示多少条`)
  bus.emit('pageSizeChange', val)
}
const handleCurrentChange = (val: number) => {
  page.page = val
  emit('submit', page)
  bus.emit('pageChange', val)
  // console.log(`当前页: ${val}`)
}

const pageData = (res) => {
  page.total = res.total
}

bus.on('pageData', pageData)
</script>
